<template>
  <div class='implementList'>
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>工作计划</span>
      </div>
<!--      <div class="div" @click='moreDateShow = true'>-->
<!--        <span class='solid'>{{shaixuanDate?shaixuanDate:'日期选择'}}</span>-->
<!--      </div>-->
    </header>
    <!-- 筛选 -->
    <div class="riqiSelect"  @click="moreDateShow = true">
      <span><a class="hengGang"></a>
        日期选择:
      </span>
      <span style="min-width:50px;justify-content: space-between;margin-left: 8px">
        <a >{{shaixuanDate? shaixuanDate : '请选择'}}</a>
        <img src="../../../assets/下降@2x.png"
             style="width: 13px;height: 7px;margin-left: 8px" alt="">
      </span>
    </div>
    <div class='screen'>
      <div class='item' :class='{"act":screenAct === ind}' @click='screenTab(item.status, ind)' v-for='(item,ind) in screenList' :key='ind'>{{item.txt}}</div>
    </div>
    <!-- 列表 -->
    <div class='list'>
      <div class='title'>执行列表</div>
      <div class='item' v-for='(item,ind) in list' :key='ind' v-if='list.length!==0' @click='listTab(item,ind)'>
        <div class='info'>
          <div>项目名称：{{item.item_name}}</div>
          <div>医生姓名：{{item.doctor}}</div>
          <div>执行日期：{{item.dateday}}</div>
          <div>预约时间：{{item.start_time}} - {{item.end_time}}</div>
          <div>执行开始时间：{{item.start}}</div>
          <div>执行结束时间：{{item.end}}</div>
        </div>
        <div class='statusK'>
          <div class='img'
               :class="{
            'img1':item.status===1,
            'img2':item.status===2,
            'img3':item.status===3,
            'img4':item.status===4,
          }"
               v-if='item.status!==null'></div>
          <div
            class='status'
            :style="{color:item.status===1?'#999999':item.status===2?'#5e974d':item.status===3?'#ecc83f':item.status===4?'#999999':''}"
          >{{item.status===1?'未执行':item.status===2?'执行中':item.status===3?'执行暂停':item.status===4?'执行结束':'无状态'}}</div>
        </div>
        <div class='fulter' v-if='listAct===ind'></div>
      </div>

      <van-empty
        style="width: 100%;height: 60%"
        v-show="list.length===0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无数据"
      />
<!--      <div class='none' v-if='list.length===0'>暂无数据</div>-->
    </div>
    <!-- 操作按钮 -->
    <div class='btnK'>
      <div class='btn' :class='{"one": stateStatus===3}' v-if='btnShow&&stateTxt' @click='btnGo()'>{{stateTxt}}</div>
      <div class='btn two' v-if='btnShow&&stateStatus===3' @click='btnGo(4)'>结束执行</div>
    </div>

    <van-dialog v-model="dialog"
                width="80%"
                confirm-button-color="#1da4f2"
                @confirm='btnYes'
                title="执行操作成功">
    </van-dialog>

    <div class="loading" v-if="loadingThis">
      <van-loading  size="24px" type="spinner" color="#1989fa"></van-loading>
    </div>

    <van-calendar  color="#1da4f2"
                   v-model="moreDateShow"
                   type="range"
                   :min-date="minDate" :max-date="maxDate"
                   @confirm="moreDateConfirm"
                   :style="{ bottom: '50px' }"
    />

  </div>
</template>

<script>
export default {
  name: 'implementList',
  data () {
    return {
      team_id: this.$route.query.team_id,
      patientId: this.$route.query.patientId,
      doc_user_id: this.$route.query.doc_user_id,

      screenAct: 0, // 筛选节点
      screenList: [
        {
          txt: '全部',
          status: null
        },
        {
          txt: '未执行',
          status: 1
        },
        {
          txt: '执行中',
          status: 2
        },
        {
          txt: '暂停执行',
          status: 3
        },
        {
          txt: '结束执行',
          status: 4
        }
      ], // 筛选项
      stateTxt: '', // 操作文字
      stateStatus: null, // 操作状态
      btnShow: false, // 操作按钮
      page: 1,
      size: 10,
      dialog: false,
      listAct: null, // 列表节点
      loadingThis: false,
      list: [], // 执行列表
      moreDateShow: false, // 日期弹窗
      start_date: '', // 开始日期
      end_date: '', // 结束日期
      minDate: new Date(2019, 10, 1), // 起始日期
      maxDate: new Date(new Date().getFullYear() + 2, 10, 1) // 结束日期
    }
  },
  mounted () {
    console.log(this.$route.query)
    this.query(this.screenList[this.screenAct].status)
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 筛选切换
    screenTab (status, ind) {
      this.screenAct = ind
      this.page = 1
      this.query(status)
      this.btnShow = false
      this.listAct = null
    },
    // 日期筛选
    moreDateConfirm (date) {
      let [start, end] = date
      this.moreDateShow = false
      start = this.Common.formatDate(start, 'yyyy-mm-dd')
      end = this.Common.formatDate(end, 'yyyy-mm-dd')
      this.start_date = start
      this.end_date = end
      this.shaixuanDate = start + '至' + end
      this.query()
      this.listAct = null
      this.btnShow = false
    },
    // 查询
    query (status) {
      let data = {
        doc_user_id: this.doc_user_id,
        team_id: this.team_id,
        patient_user_id: this.patientId,
        status: status,
        dateday_begin: this.start_date,
        dateday_end: this.end_date
      }
      this.loadingThis = true
      this.$http.getPost('/miniTeamTodayWork/findItems', data).then((res) => {
        this.loadingThis = false
        console.log('反馈', res.data)
        if (res.data.status === 'success') {
          this.list = res.data.data
        }
      }).catch(() => {
        this.loadingThis = false
        this.$toast('您的网络有些拥挤，请稍后再试')
      })
    },
    // 数据切换
    listTab (item, ind) {
      if (this.listAct === ind) {
        this.listAct = null
        this.btnShow = false
      } else {
        this.stateTxt = (function (item) {
          switch (item.status) {
            case 1: return '开始执行'
            case 2: return '暂停执行'
            case 3: return '恢复执行'
            default: return ''
          }
        })(item)
        this.stateStatus = (function (item) {
          switch (item.status) {
            case 1: return 2
            case 2: return 3
            case 3: return 2
            default: return item.status
          }
        })(item)
        this.listAct = ind
        this.btnShow = true
      }
    },
    // 操作
    btnGo (statusNum) {
      let data = {
        id: this.list[this.listAct].id,
        start: this.list[this.listAct].start,
        end: this.list[this.listAct].end,
        status: !statusNum ? this.stateStatus : statusNum
      }
      this.loadingThis = true
      this.$http.getPost('/miniTeamTodayWork/updateScheduleAmount', data).then((res) => {
        console.log('反馈', res.data)
        this.loadingThis = false
        if (res.data.status === 'success') {
          this.dialog = true
        } else {
          this.$toast(res.data.msg)
        }
      }).catch(() => {
        this.loadingThis = false
        this.$toast('您的网络有些拥挤，请稍后再试')
      })
    },
    // 操作成功
    btnYes () {
      this.listAct = null
      this.btnShow = false
      this.query(this.screenList[this.screenAct].status)
    }
  }
}
</script>

<style scoped lang='scss'>

.implementList{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
  font-size: 15px;
  position: relative;
  //box-sizing: border-box;

  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
    width: 13px;
    height: 13px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }

  .riqiSelect{
    width: 100%;
    height: 44px;
    background: white;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    color: #1da4f2;
  }
  .riqiSelect span{
    display: flex;
    align-items: center;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 16px;
    background: #1DA4F2;
    margin-right: 5px;
  }

  .screen{
    width: 96vw;
    padding: 4vw 2vw;
    //overflow: hidden;
    //position: fixed;
    //left: 0;
    //top: 44px;
    z-index: 5;
    //background-color: #f5f5f5;
    background-color: white;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    //display: flex;
    //align-items: center;
    //flex-wrap: nowrap;

    .item{
      //float: left;
      display: inline-block;
      width: 25vw;
      font-size: 3.6vw;
      line-height: 8vw;
      border: 1px solid #999;
      color: #999;
      text-align: center;
      border-radius: 4vw;
      white-space: nowrap;
      &:not(:last-child){
        margin-right: 2vw;
      }
      &.act{
        color: #1da1f2;
        border-color: #1DA1F2;
      }
    }
  }

  .list{
    width: 100%;
    //height: calc(100% - 14vw);
    overflow: scroll;
    //margin-top: 55px;
    padding-top: 5px;

    .title{
      font-size: 15px;
      font-weight: bold;
      color: #333333;
      padding: 10px 20px;
      background-color: #FAF9FE;
      margin-bottom: 2vw;
    }

    .item{
      width: 86vw;
      margin: 0 auto 5vw;
      padding: 2vw;
      background-color: white;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      align-items: center;
      position: relative;

      &>div{
        float: left;
        font-size: 15px;
        color: #333333;
        line-height: 25px;

        &.info{
          width: 66vw;
        }
        &.statusK{
          width: 20vw;
          float: left;
          align-items: center;
          text-align: center;

          .img{
            width: 15vw;
            height: 15vw;
            border-radius: 50%;
            background-size: 100%;
            background-position: center;
            margin: 0 auto 5vw;

            &.img1{
              background-image: url("../../../assets/zhiyuan/zhixing-btn2.png");
            }
            &.img2{
              background-image: url("../../../assets/zhiyuan/zhixing-status2.png");
            }
            &.img3{
              background-image: url("../../../assets/zhiyuan/zhixing-btn3.png");
            }
            &.img4{
              background-image: url("../../../assets/zhiyuan/zhixing-btn1.png");
            }
          }
        }

        &.fulter{
          float: none;
          position: absolute;
          left: 0;
          top: 0;
          width: 90vw;
          height: 100%;
          z-index: 2;
          background-color: rgba(0,191,255,0.3);
        }
      }
    }

    .none{
      font-size: 15px;
      color: #999999;
      text-align: center;
      margin-top: 5vw;
    }

  }

  .btnK{
    width: 100vw;
    height: 15vw;
    position: fixed;
    left: 0;
    bottom: 15vw;
    z-index: 5;
    overflow: hidden;
  }
  .btn{
    width: 86vw;
    height: 15vw;
    border-radius: 5px;
    background-color: #1da1f2;
    color: white;
    font-size: 15px;
    line-height: 15vw;
    text-align: center;
    margin: 0 auto;
    &.one{
      float: left;
      margin: 0 3.33vw;
    }
    &.two{
      float: left;
    }
    //position: fixed;
    //left: 50%;
    //bottom: 15vw;
    //z-index: 5;
    //transform: translateX(-50%);
  }

  .loading {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
